<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易银行邮件信息统计</title>
</head>
<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }
    table, th, td {
        border: 1px solid black;
    }
    th, td {
        padding: 8px;
        text-align: left;
    }
    th {
        background-color: #f2f2f2;
    }
</style>
<body>
<div id="app">
    <div>
        成功发送信息条数：{{success}}
    </div>
    <br/>
    <div>
        <table>
            <thead>
            <tr>
                <th>用户账号</th>
                <th>操作金额</th>
                <th>操作时间</th>
                <th>操作类型</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="msg in message">
                <td>{{msg.accountid}}</td>
                <td>{{msg.opmoney}}</td>
                <td>{{msg.optime}}</td>
                <td v-if="msg.optype==='DEPOSITE'">存款</td>
                <td v-if="msg.optype==='WITHDRAW'">取款</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<script src="js/axios.js"></script>
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            success: 0,
            protocol: '',
            host: '',
            endpoint: 0,
            contextPath: '',
            message:[],
        },
        methods: {
            send(){
                var params=new URLSearchParams();
                axios.post('email/websocket', params).then(result => {
                    app.getMessage();
                    let jm = result.data;
                    if (jm.code === 1) {
                        this.success=jm.obj;
                    }
                })
            },
            getMessage(){
                axios.get('email/message').then(result => {
                    let jm = result.data;
                    if (jm.code === 1) {
                        this.message=jm.obj;
                    }
                })
            },
            // 获取协议参数
            getServletInfo() {
                axios.post('email/info').then(result => {
                    if (result.data.code == 1) {
                        // 返回参数后，初始化参数
                        this.protocol = result.data.obj.protocol;
                        this.host = result.data.obj.host;
                        this.endpoint = result.data.obj.port;
                        this.contextPath = result.data.obj.contextPath;
                        this.initWebSocket();
                    }
                });
            },
            //初始化参数
            initWebSocket() {
                // 获取当前页面的协议、主机和端口
                //const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
                const protocol = this.protocol;
                const host = this.host;
                const endpoint = this.endpoint + this.contextPath + '/email';
                // 动态生成 WebSocket 的 URL
                const wsUrl = `${protocol}://${host}:${endpoint}`;
                // 创建 WebSocket 连接
                var ws = new WebSocket(wsUrl);
                ws.onopen = function () {
                    console.log('WebSocket 连接已经建立。');
                    // ws.send('Hello, server!');
                };
                ws.onmessage = function (event) {
                    console.log('收到服务器消息：', event.data);
                    // alert("收到服务器消息：" + event.data);
                    //该刷新了
                    app.send()
                }
                ws.onerror = function (event) {
                    console.error('WebSocket 连接出现错误：', event);
                };
                ws.onclose = function () {
                    console.log('WebSocket 连接已经关闭。');
                };
                window.onbeforeunload = function () {
                    app.$data.ws.close();
                };
                this.ws = ws;
            },
        },
        mounted(){
            this.send();
            this.getServletInfo();
        }
    })
</script>
</body>
</html>